<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色，影响自由输入框的按钮，传入附加组件</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色，影响自由输入框的按钮，传入附加组件</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>0.5em</view>
				<view>圆角，需带单位，或0。影响公式框、自由输入框、自由输入框按钮</view>
			</view>
			<view class="tr">
				<view>keyboard</view>
				<view>String</view>
				<view>decimal</view>
				<view>默认键盘，在keyboard.js内定义</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String</view>
				<view>无</view>
				<view>公式字符串</view>
			</view>
			<view class="tr">
				<view>bodyHight</view>
				<view>String, Number</view>
				<view>7.5em</view>
				<view>公式框高度</view>
			</view>
			<view class="tr">
				<view>bodyClass</view>
				<view>String</view>
				<view>无</view>
				<view>正文框的样式名，全局样式有效</view>
			</view>
			<view class="tr">
				<view>dataSet</view>
				<view>Object</view>
				<view>无</view>
				<view>附加数据集，传入每个自定义组件</view>
			</view>
			<view class="tr">
				<view>text</view>
				<view>Object</view>
				<view></view>
				<view>文字自定义，同时传入自定义组件
					<view>insert:"自由输入框插入按钮"</view>
					<view>returnKeyboard:"自由输入框返回键盘按钮"</view>
				</view>
			</view>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="键盘定义 keyboard.js" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>column</view>
						<view>Number</view>
						<view>网格列数</view>
					</view>
					<view class="tr">
						<view>cellHeight</view>
						<view>Number</view>
						<view>网格高，单位em</view>
					</view>
					<view class="tr">
						<view>space</view>
						<view>Number</view>
						<view>间距，单位em</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String</view>
						<view>按键圆角</view>
					</view>
					<view class="tr">
						<view>keys</view>
						<view>Array(Object)</view>
						<view>按键定义，详细见下方</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="键盘按键定义 keys" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>name</view>
						<view>String</view>
						<view>按键显示值</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String</view>
						<view>按键插入值。在使用功能函数的情况，为函数参数值</view>
					</view>
					<view class="tr">
						<view>shiftName</view>
						<view>String</view>
						<view>shift激活时的按键显示值</view>
					</view>
					<view class="tr">
						<view>shiftValue</view>
						<view>String</view>
						<view>shift激活时的按键插入值。在使用功能函数的情况无效</view>
					</view>
					<view class="tr">
						<view>icon</view>
						<view>String</view>
						<view>按键图标名，如果存在值则优先显示图标</view>
					</view>
					<view class="tr">
						<view>rowStart</view>
						<view>String</view>
						<view>网格点行start，格式同css grid样式的grid-row-start</view>
					</view>
					<view class="tr">
						<view>rowEnd</view>
						<view>String</view>
						<view>网格点行end，格式同css grid样式的grid-row-end</view>
					</view>
					<view class="tr">
						<view>colStart</view>
						<view>String</view>
						<view>网格点列start，格式同css grid样式的grid-column-start</view>
					</view>
					<view class="tr">
						<view>colEnd</view>
						<view>String</view>
						<view>网格点列end，格式同css grid样式的grid-column-end</view>
					</view>
					<view class="tr">
						<view>width</view>
						<view>String</view>
						<view>插入值元素的宽度，特殊使用。比如插入空格时默认渲染没有宽度</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>按键主题色</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>按键自定义主题色</view>
					</view>
					<view class="tr">
						<view>activeType</view>
						<view>String</view>
						<view>按键激活状态时主题色，特殊使用。比如shift键</view>
					</view>
					<view class="tr">
						<view>activeColor</view>
						<view>String</view>
						<view>按键激活状态时自定义主题色，特殊使用。比如shift键</view>
					</view>
					<view class="tr">
						<view>bold</view>
						<view>Boolean</view>
						<view>按键显示值加粗</view>
					</view>
					<view class="tr">
						<view>func</view>
						<view>String</view>
						<view>使用功能函数的函数名，功能函数在keyFunction.js内定义。包含系统功能、自定义功能</view>
					</view>
					
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-md">
			由于小程序不支持动态调用组件，新增附加组件需要手动定义。应向附加组件传入type、color、dataSet、text参数。dataSet为附加组件总数据集，传入附加组件后再分别取用。目前附加组件有fieldsMenu、functionMenu可做参考
		</view>
		
		<view class="p-md">
			<view class="py-sm">
				基本使用：{{`&lt;common-formula-editor :value="公式串" :dataSet="附加组件数据集">&lt;/common-formula-editor>`}}
			</view>
			<view class="py-md">
				<common-formula-editor :value="value" ref="editor" :dataSet="dataSet"></common-formula-editor>
			</view>
			<view class="py-md">
				<vi-button @click="onclick">导出</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:"asdsgefae$_widget_ads#sdzvase213$_widget_ads#112$_widget_bg#666\nggggg",
				dataSet:{
					//变量字典
					fieldOptions:[
						{name:"字段1",value:"$_widget_ads#", type:"primary", dataTypeName:"数字"},
						{name:"字段2",value:"$_widget_bg#", type:"second", dataTypeName:"文本"},
						{name:"字段3",value:"$_widget_ads#", type:"primary", dataTypeName:"数字"},
						{name:"字段4",value:"$_widget_bg#", type:"second", dataTypeName:"文本"},
						{name:"字段5",value:"$_widget_ads#", type:"primary", dataTypeName:"数字"},
						{name:"字段6",value:"$_widget_bg#", type:"second", dataTypeName:"文本"},
					],
					//函数字典，带组结构
					functionOptions:[
						{
							name:"数学函数",
							list:[
								{
									name:"AVERAGE",
									value:"AVERAGE()",
									point:-1,
									explain:`<span class="func">AVERAGE</span>函数可以获取一组数值的算术平均值`,
									instruction:`<span class="func">AVERAGE</span>(数字1,数字2,...)`,
									example:`<span class="func">AVERAGE</span>(<span class="field">语文成绩</span>,<span class="field">数学成绩</span>, <span class="field">英语成绩</span>)返回三门课程的平均分`
								},
								{
									name:"MAX",
									value:"MAX()",
									point:-1,
									explain:`<span class="func">MAX</span>函数可以获取一组数值的最大值`,
									instruction:`<span class="func">MAX</span>(数字1,数字2,...)`,
									example:`<span class="func">MAX</span>(<span class="field">语文成绩</span>,<span class="field">数学成绩</span>, <span class="field">英语成绩</span>)返回三门课程中的最高分`
								},	
							]
						}
					],
					specialOptions:[
						{name:"复制当前公式",func:"copy"},
						{name:"粘贴缓存公式",func:"paste"},
						{name:"重置公式",func:"reset"},
					]
				}
			}
		},
		methods: {
			onclick(){
				console.log(this.$refs.editor.getData());
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
